import React, {Component} from 'react';
import {Row, Col, Spin} from 'antd';
import "../css/storageManage.css";
import {orderList} from "../value";
import app from '../AppMethod';
import moment from 'moment';

class storageManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data1: [],
            data2: [],
            data3: [],
        }
    };

    render() {
        return (
            <div>
                <div className="storageManageTitle">
                    入库展示
                </div>
                <div style={{paddingTop:50}}>
                    <Spin spinning={this.state.loading}>
                        <div className="tableContainer">
                            <Row className="tableHeader">
                                <Col span={4} className="tableContainerCol">厂家</Col>
                                <Col span={4} className="tableContainerCol">入库订单号</Col>
                                <Col span={4} className="tableContainerCol">预计来货日期</Col>
                                <Col span={3} className="tableContainerCol">预计金额</Col>
                                <Col span={3} className="tableContainerCol">预计件数</Col>
                                <Col span={3} className="tableContainerCol">预计散包数</Col>
                                <Col span={3} className="tableContainerCol">下单日期</Col>
                            </Row>
                            {
                                this.state.data1.length > 0 ?
                                    <span>
                                    <Row className="outTime outTime1">
                            超一天没有到货
                        </Row>
                        <div>
                            {
                                this.state.data1.map((item, index) => {
                                    return (
                                        <StorageList data={item} key={index}/>
                                    )
                                })
                            }
                        </div>
                                </span> : ''
                            }
                            {
                                this.state.data2.length > 0 ?
                                    <span>
                                    <Row className="outTime outTime2">
                            超一天未过账
                        </Row>
                        <div>
                            {
                                this.state.data2.map((item, index) => {
                                    return (
                                        <StorageList data={item} key={index}/>
                                    )
                                })
                            }
                        </div>
                                </span> : ''
                            }
                            {
                                this.state.data1.length <= 0 && this.state.data2.length <= 0 && this.state.data3.length <= 0 ? '' :
                                    <Row className="outTime outTime3">
                                        正常
                                    </Row>
                            }
                            <div>
                                {
                                    this.state.data3.length > 0 ?
                                        this.state.data3.map((item, index) => {
                                            return (
                                                <StorageList data={item} key={index}/>
                                            )
                                        }) : <div style={{textAlign: 'center', marginTop: '10px'}}>无数据</div>
                                }
                            </div>
                        </div>
                    </Spin>
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetStorageList();
        this.timer = setInterval(() => this.handleGetStorageList(), 1000 * 60 * 1);
    };

    componentWillUnmount() {
        clearInterval(this.timer);
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 根据不同条件获取入库端订单列表
     */
    handleGetStorageList() {
        let id = this.props.match.params.id;
        this.setState({loading: true});
        app.post(orderList.SHOW_STORAGELIST, {stock_id: id, type: '0'}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].storage_time = data[i].storage_time == null ? '' : moment(data[i].storage_time).format("YYYY-MM-DD");
                    data[i].storage_order_time = data[i].storage_order_time == null ? '' : moment(data[i].storage_order_time).format("YYYY-MM-DD");
                }
                console.log(data);
                this.setState({data1: data});
            } else {
                this.setState({data1: []});
            }
        });
        app.post(orderList.SHOW_STORAGELIST, {stock_id: id, type: '1'}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].storage_time = data[i].storage_time == null ? '' : moment(data[i].storage_time).format("YYYY-MM-DD");
                    data[i].storage_order_time = data[i].storage_order_time == null ? '' : moment(data[i].storage_order_time).format("YYYY-MM-DD");
                }
                this.setState({data2: data});
            } else {
                this.setState({data2: []});
            }
        });
        app.post(orderList.SHOW_STORAGELIST, {stock_id: id, type: '2'}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].storage_time = data[i].storage_time == null ? '' : moment(data[i].storage_time).format("YYYY-MM-DD");
                    data[i].storage_order_time = data[i].storage_order_time == null ? '' : moment(data[i].storage_order_time).format("YYYY-MM-DD");
                }
                this.setState({data3: data, loading: false});
            } else {
                this.setState({data3: [], loading: false});
            }
        });
    }
};

/**
 * 订单子组件
 */
class StorageList extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {storage_factory, storage_num, storage_time, storage_money, storage_package, storage_single, storage_order_time} = this.props.data;
        return (
            <Row className="tableContainer">
                <Col span={4} className="tableContainerCol">{storage_factory}</Col>
                <Col span={4} className="tableContainerCol">{storage_num}</Col>
                <Col span={4} className="tableContainerCol timerItem">{storage_time}</Col>
                <Col span={3} className="tableContainerCol">{storage_money}</Col>
                <Col span={3} className="tableContainerCol">{storage_package}</Col>
                <Col span={3} className="tableContainerCol">{storage_single}</Col>
                <Col span={3} className="tableContainerCol timerItem">{storage_order_time}</Col>
            </Row>
        )
    };
}

export default storageManage;